<!DOCTYPE html>
<html lang="en">

  <!-- Head -->
  <head>
    <meta charset="UTF-8">
    <title>Users</title>
    <link rel="stylesheet" type="text/css" href="/stylesheets/users.css" />

    <!-- Handlebars -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.8/handlebars.min.js"></script>

    <!-- Bootstrap -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
      crossorigin="anonymous"
    ></script>
  </head>

  <!-- Body -->
  <body>

    <!-- Add Users -->
    <div class="users-column add-user-col">
      <div class="column-header">
        Add User:
      </div>
      <div>
        <input
          id="name-input"
          type="text"
          class="form-control"
          placeholder="Name"
        />
      </div>
      <div>
        <input
          id="email-input"
          type="email"
          class="form-control"
          placeholder="Email"
        />
      </div>
      <div>
        <button
          id="add-user-btn"
          class="btn btn-success"
        >
          Add
        </button>
      </div>
    </div>

    <!-- Display Users -->
    <div class="users-column">
      <div class="column-header">
        Users:
      </div>

      <div id="all-users-anchor"></div>
      <script
        id="all-users-template"
        type="text/x-handlebars-template"
      >
        {{#each users}}
          <div class="user-display-ele">
            <div class="normal-view">
              <div><b>Name:</b> {{name}}</div>
              <div><b>Email:</b> {{email}}</div>
              <div><b>Created:</b> {{createdFormatted}}</div>
              <button
                type="button"
                class="btn btn-primary edit-user-btn"
                data-user-id="{{id}}"
              >
                Edit
              </button>
              <button
                class="btn btn-danger delete-user-btn"
                data-user-id="{{id}}"
              >
                Delete
              </button>
            </div>

            <div class="edit-view">
              <div>
                Name:&nbsp;
                <input
                  type="text"
                  class="form-control name-edit-input"
                  value="{{name}}"
                />
              </div>
              <div class="email-edit">
                Email:&nbsp;
                <input
                  type="email"
                  class="form-control email-edit-input"
                  value="{{email}}"
                />
              </div>
              <button
                class="btn btn-primary submit-edit-btn"
                data-user-id="{{id}}"
                data-user-created="{{created}}"
              >
                Submit
              </button>
              <button
                class="btn btn-secondary cancel-edit-btn"
                data-user-id="{{id}}"
              >
                Cancel
              </button>
            </div>
          </div>
        {{/each}}
      </script>
    </div>
  </body>

  <script src="scripts/http.js"></script>
  <script src="scripts/users.js"></script>
</html>
